<template>
  <el-card>
    <!-- 使用组件复用的方式处理重复的标签组 -->
    <div
      class="mt"
      v-for="(items, category) in filterCategories"
      :key="category"
    >
      <span class="title">{{ category }}:</span>
      <el-tag
        v-for="item in items"
        :key="item"
        :type="getTagType(category, item)"
        class="mr"
        @click="handleFilter(category, item)"
      >
        {{ item }}
      </el-tag>
    </div>

    <el-divider />

    <div class="mt">
      <span class="title">已选:</span>
      <el-tag
        v-for="(value, key) in activeFilters"
        :key="key"
        v-show="value !== '全部'"
        type="success"
        class="mr"
        closable
        @close="handleClose(key)"
      >
        {{ value }}
      </el-tag>
    </div>
  </el-card>
  <div class="mt mb">
    <el-button type="primary" @click="exportToHtml"
      >导出富文本到HTML文件</el-button
    >
    <el-button  @click="handleSubmit">提交</el-button>

  </div>
  <Editor
    v-model="content"
    api-key="xvbamfm2vokka8qoim9r801qtdlldskjschd51yha7zhuusp"
    :init="{
      language: 'zh_CN',
      plugins: 'lists link image table code help wordcount',
    }"
  />
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { documentListApi } from '@/api/document';
import Editor from '@tinymce/tinymce-vue';

interface DocumentList {
  type: string[];
  important: string[];
  publish: string[];
}

// 添加类型定义
type FilterKeys = '文章类型' | '重要程度' | '发布渠道';
type Filters = Record<FilterKeys, string>;

// 修改 ref 定义
const activeFilters = ref<Filters>({
  文章类型: '全部',
  重要程度: '全部',
  发布渠道: '全部',
});

const documentList = ref<DocumentList>({
  type: [],
  important: [],
  publish: [],
});

// 使用计算属性整合过滤分类
const filterCategories = computed(() => ({
  文章类型: ['全部', ...documentList.value.type],
  重要程度: ['全部', ...documentList.value.important],
  发布渠道: ['全部', ...documentList.value.publish],
}));

// 修改函数参数类型
const getTagType = (category: FilterKeys, item: string): string => {
  return activeFilters.value[category] === item
    ? item === '全部'
      ? 'primary'
      : 'success'
    : 'info';
};

// 修改函数参数类型
const handleFilter = (category: FilterKeys, item: string) => {
  activeFilters.value[category] = item;
};

// 修改函数参数类型
const handleClose = (category: FilterKeys) => {
  activeFilters.value[category] = '全部';
};

const loadData = async () => {
  try {
    const res = await documentListApi();
    if (res.code === 200) {
      documentList.value = res.data;
    }
  } catch (error) {
    console.error('加载数据失败:', error);
  }
};

onMounted(() => {
  loadData();
});

const content = ref('');

const exportToHtml = () => {
  //   console.log(content.value);
  const blob = new Blob([content.value], { type: 'text/html' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = 'document.html';
  link.click();
  URL.revokeObjectURL(link.href);
};

const handleSubmit = () => {
  console.log(content.value);
};
</script>

<style scoped lang="less">
.title {
  display: inline-block;
  width: 80px;
  font-size: 14px;
  margin-right: 10px;
}

.mr {
  margin-right: 8px;
}

.mt {
  margin-top: 16px;
}
.el-tag {
  cursor: pointer;
}
</style>
